<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>120秒倒计时</title>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<link href="${pageContext.request.contextPath}/css/validation.css"
	rel="stylesheet">
	<link href="${pageContext.request.contextPath}/css/common_css.css"
		rel="stylesheet">
		<link href="${pageContext.request.contextPath}/css/booking.css"
			rel="stylesheet">
			<link
				href="${pageContext.request.contextPath}/css/dhtmlxwindows_dhx_terrace.css"
				rel="stylesheet">
				<link
					href="${pageContext.request.contextPath}/css/dhtmlxwindows.css"
					rel="stylesheet">
					<link href="${pageContext.request.contextPath}/css/WdatePicker.css"
						rel="stylesheet">
</head>

<body class="dhtmlx_winviewport dhtmlx_skin_dhx_terrace">
	<div class="header">
		<div style="z-index: 2000" class="header-bd">
			<a href="http://www.12306.cn/"><h1 class="logo"></h1>
			</a>


		</div>
	</div>
	<!--header end-->
	<!--页面主体  开始-->
	<div class="content" id="main_content" style="min-height: 395px;">
		<!--支付提示 开始-->
		<div class="t-succ t-lock">
			<div class="pay-tips">
				<span class="i-lock"></span>
				<h3>
					<span> 商品已锁定，请在<span class="colorA">30</span> 分钟内进行支付。 <span><strong
							class="colorA"><div style="float: left" id="minute"></div>
								<div style="float: left">分</div>
								<div style="float: left" id="second"></div>
								<div style="float: left">秒</div></strong> </span>
					</span>
				</h3>
			</div>
		</div>
		<!--订单信息 开始-->
		<div class="layout b-info">
			<div class="lay-hd">订单信息</div>
			<div class="lay-bd">
				<form id="Sorder" method="post">
					<input type="hidden" id="orderId" name="orderId" value="${orderInfo.id }"/>
				<table class="table-a" id="table_list">
					<tbody>
						<tr>
							<th width="70" rowspan="1" colspan="1"><strong>商品名</strong></th>
							<th width=70" rowspan="1" colspan="1"><strong>店铺名</strong></th>
							<th width="70" rowspan="1" colspan="1"><strong>卖家</strong></th>
							<th width="50" rowspan="1" colspan="1"><strong>屏幕尺寸</strong></th>
							<th width="50" rowspan="1" colspan="1"><strong>内存容量</strong></th>
							<th width="50" rowspan="1" colspan="1"><strong>手机容量</strong></th>
							<th width="40" rowspan="1" colspan="1"><strong>版本</strong></th>
							<th width="40" rowspan="1" colspan="1"><strong>单价</strong></th>
							<th width="40" rowspan="1" colspan="1"><strong>数量</strong></th>
							<th width="120" rowspan="1" colspan="1"><strong>收货地址</strong></th>
							<th width="70" rowspan="1" colspan="1"><strong>收货人</strong></th>
							<th width="70" rowspan="1" colspan="1"><strong>联系电话</strong></th>
							<th width="40" rowspan="1" colspan="1"><strong>总价</strong></th>
						</tr>
					</tbody>
					<tbody id="show_ticket_message">
						<tr>
							
							<td align="center">${orderInfo.goodsName }</td>
							<td>${orderInfo.storeName }</td>
							<td>${orderInfo.saleName }</td>
							<td>${orderInfo.screenSize }</td>
							<td>${orderInfo.rom }</td>
							<td>${orderInfo.ram }</td>
							<td>${orderInfo.version }</td>
							<td>${orderInfo.singlePrice }</td>
							<td>${orderInfo.num }</td>
							<td>${orderInfo.recAddress }</td>
							<td>${orderInfo.recName }</td>
							<td>${orderInfo.recPhone }</td>
							<td>${orderInfo.sumPrice }</td>
						</tr>
					</tbody>
				</table>
				</form>










				<div class="lay-btn bt_blue">
					<!-- th:if="${tour_flag eq 'wc'}"  -->
					<!-- 往返车次按钮 -->
					<!-- 往返车次按钮 -->
					<!-- 单程车次按钮 -->
					<p>
						<span><input type="submit" class="btn92" id="payButton"
							shape="rect" value="立即支付" /></span>
						<!-- <a href="javascript:" class="btn92" id="cancelButton" shape="rect">取消订单</a> -->
						<span><input type="submit" class="btn92" id="cancelButton"
							shape="rect" value="取消订单" /></span>
					</p>
					<!-- 改签车次按钮 -->
					<!-- 积分支付成功form表单 -->
				</div>

			</div>
		</div>
		<!--订单信息 结束-->
	</div>
	<!-- 彈出警告框 -->
	<div class="up-box w600" style="display: none;" id="confirmPrice">
		<div class="up-box-hd">
			交易提示<a id="close_conifrmdialog_id" href="javascript:" shape="rect">关闭</a>
		</div>
		<div class="up-box-bd">
			<div class="up-con clearfix">
				<span class="icon i-opt"></span>
				<div class="r-txt">
					<div class="tit">您所选的车票中有低于50元的车票</div>
					<p>所兑车票票价低于50元时，每张车票将扣除5000积分。</p>
					<p>如您同意支付，请按“确认”按钮。</p>
				</div>
			</div>
			<div class="lay-btn">
				<a id="cancel_dialog" href="javascript:" class="btn92" shape="rect">取消</a>
				<a href="javascript:" class="btn92s" id="goto_integration"
					shape="rect">确认</a>
			</div>
		</div>
	</div>
	<!-- 彈出警告框 -->
	<div class="up-box w600" style="display: none;" id="confirmToPay">
		<div class="up-box-hd">
			支付提示<a id="close_confirmToPay" href="javascript:" shape="rect">关闭</a>
		</div>
		<div class="up-box-bd">
			<div class="up-con clearfix">
				<span class="icon i-opt"></span>
				<div class="r-txt">
					<div class="tit">您包含未保存的物流单信息</div>
					<p>如您继续支付，请按“确定”按钮。</p>
				</div>
			</div>
			<div class="lay-btn">
				<a id="cancel_confirmToPay" href="javascript:" class="btn92"
					shape="rect">取消</a> <a href="javascript:" class="btn92s"
					id="conf_confirmToPay" shape="rect">确认</a>
			</div>
		</div>
	</div>
	<!-- 网上支付提示信息 开始  <a href="javascript:" id="online_dialog_close">关闭</a>-->

	<!-- 网上支付提示 结束 -->
	<!-- 取消改签提示 开始 -->
	<div class="up-box w600" style="display: none;" id="cancel_resign_id">
		<div class="up-box-hd">
			交易提示<a href="javascript:" id="cancel_resign_close" shape="rect">关闭</a>
		</div>
		<div class="up-box-bd">
			<div class="up-con clearfix">
				<span class="icon i-opt"></span>
				<div class="r-txt">
					<div class="tit"></div>
					<p class="colorA">
						一天内<strong>3次</strong> 申请车票成功后取消 ，<strong>当天</strong> 将不能在网站购票。
					</p>
				</div>
			</div>
			<div class="lay-btn">
				<a href="javascript:" class="btn92" id="cancel_resign_cr"
					shape="rect">取消</a> <a href="javascript:" class="btn92s"
					id="cancel_resign_ok" shape="rect">确认</a>
			</div>
		</div>
	</div>
	<!-- 取消改签提示 结束 -->
	<!-- 取消订单提示 开始 -->
	<div class="up-box w600" style="display: none;" id="cancel_order_id">
		<div class="up-box-hd">
			交易提示<a href="javascript:" id="cancel_order_close" shape="rect">关闭</a>
		</div>
		<div class="up-box-bd" id="content">
			<div class="up-con clearfix">
				<span class="icon i-opt"></span>
				<div class="r-txt">
					<div class="tit">您确认取消订单吗？</div>
					<p>一天内3次申请车票成功后取消订单，当日将不能在网站购票！</p>
				</div>
			</div>
			<div class="lay-btn">
				<a href="javascript:" class="btn92" id="cancel_order_co"
					shape="rect">取消</a> <a href="javascript:" class="btn92s"
					id="cancel_order_ok" shape="rect">确认</a>
			</div>
		</div>
	</div>
	<!-- 取消订单提示 结束 -->
	<form id="_es_hiddenform" method="post"
		enctype="application/x-www-form-urlencoded">
		<input type="hidden" name="_json_att" value="">
	</form>
	
	
	
	






	<%-- ===========================================
	<button id="btn">button</button>


	<div class="t-succ t-lock">
		<div class="pay-tips">
			<span class="i-lock"></span>
			<h3>
				<span> 商品已锁定，请在<span class="colorA">30</span> 分钟内进行支付。
					<span><strong class="colorA"><div style="float:left" id="minute"></div>
								<div style="float:left">分</div>
								<div style="float:left" id="second"></div>
								<div style="float:left" >秒</div></strong>
				</span>
				</span>
			</h3>
		</div>
	</div>

	<div class="layout b-info">
	<table class="table-a" id="table_list">
		<tbody>
			<tr>
				<th width="40" rowspan="1" colspan="1"><strong>商品名</strong></th>
				<th width="40" rowspan="1" colspan="1"><strong>店铺名</strong></th>
				<th width="40" rowspan="1" colspan="1"><strong>卖家</strong></th>
				<th width="75" rowspan="1" colspan="1"><strong>屏幕尺寸</strong></th>
				<th width="120" rowspan="1" colspan="1"><strong>内存容量</strong></th>
				<th width="210" rowspan="1" colspan="1"><strong>手机容量</strong></th>
				<th width="140" rowspan="1" colspan="1"><strong>版本</strong></th>
				<th width="70" rowspan="1" colspan="1"><strong>单价</strong></th>
				<th width="70" rowspan="1" colspan="1"><strong>数量</strong></th>
				<th width="70" rowspan="1" colspan="1"><strong>收货地址</strong></th>
				<th width="70" rowspan="1" colspan="1"><strong>收货人</strong></th>
				<th width="70" rowspan="1" colspan="1"><strong>联系电话</strong></th>
				<th width="70" rowspan="1" colspan="1"><strong>总价</strong></th>
			</tr>
		</tbody>
		<tbody id="show_ticket_message">
			<tr>
				<td align="center">${orderInfo.goodsName }</td>
				<td>${orderInfo.storeName }</td>
				<td>${orderInfo.saleName }</td>
				<td>${orderInfo.screenSize }</td>
				<td>${orderInfo.rom }</td>
				<td>${orderInfo.ram }</td>
				<td>${orderInfo.version }</td>
				<td>${orderInfo.singlePrice }</td>
				<td>${orderInfo.num }</td>
				<td>${orderInfo.recAddress }</td>
				<td>${orderInfo.recName }</td>
				<td>${orderInfo.recPhone }</td>
				<td>${orderInfo.sumPrice }</td>
			</tr>
		</tbody>
	</table>
	</div>
	
	<p>
		<a href="javascript:" class="btn92" id="cancelButton" shape="rect">取消订单</a>
		<span><a href="javascript:" class="btn92" id="payButton"
			shape="rect">网上支付</a> </span>
	</p>

	<!-- 取消改签提示 结束 -->
	<!-- 取消订单提示 开始 -->
	<div class="up-box w600" style="display: none;" id="cancel_order_id">
		<div class="up-box-hd">
			交易提示<a href="javascript:" id="cancel_order_close" shape="rect">关闭</a>
		</div>
		<div class="up-box-bd" id="content">
			<div class="up-con clearfix">
				<span class="icon i-opt"></span>
				<div class="r-txt">
					<div class="tit">您确认取消订单吗？</div>
					<p>一天内3次申请车票成功后取消订单，当日将不能在网站购票！</p>
				</div>
			</div>
			<div class="lay-btn">
				<a href="javascript:" class="btn92" id="cancel_order_co"
					shape="rect">取消</a> <a href="javascript:" class="btn92s"
					id="cancel_order_ok" shape="rect">确认</a>
			</div>
		</div>
	</div> --%>
</body>
<script type="text/javascript">
	$(function() {
		var minute = $('#minute');
		var second = $('#second');
		$("#payButton").click(function() {
			if (minute.html() == "00" && second.html() == "00") {
				alert("支付超时，订单已取消，请重新购买！");
				var url = "${pageContext.request.contextPath}/order/delOrder";
				$("#Sorder").attr("action", url);
				$("#Sorder").submit();
				
				
			} else {
				//改变订单状态为已完成
				
				var url = "${pageContext.request.contextPath}/order/payOrder";
				$("#Sorder").attr("action", url);
				$("#Sorder").submit();
			}
			
			
		});
		
		$("#cancelButton").click(function() {
			
				
			var url = "${pageContext.request.contextPath}/order/delOrder";
			$("#Sorder").attr("action", url);
			$("#Sorder").submit();
				
			
		
		});

		function oDouble(num) {
			if (num < 10) {
				return '0' + num;
			} else {
				return num;
			}
		}
		window.onload = function() {
			var minute = document.getElementById('minute');
			var second = document.getElementById('second');
			var ShowTime = document.getElementById('ShowTime');
			var i = 30;
			function times() {
				var oPoints = i / 60
				var oSeconds = i % 60
				if (i >= 0) {
					minute.innerHTML = oDouble(parseInt(oPoints));
					second.innerHTML = oDouble(oSeconds);
				}
				i--
			}
			setInterval(times, 1000)
			times()

		};
	});
</script>
</html>